<template>
	<view>
		<view v-show="!showTip" id="panorama" :position="position" :change:position="renderTest.positionChanged">
		</view>
		<view v-show="showTip" style="margin-top: 100upx;">
			<u-empty mode="address" text="当前位置没有全景"></u-empty>
		</view>

		<u-popup v-model="show" mode="bottom" :mask-close-able="false" closeable @close="gotoback"
			:mask-custom-style="{background: 'rgba(0, 0, 0, 0.7)'}" length="70%">
			<view class="u-p-l-20 u-p-r-20 u-p-t-60 text-center">
				<image src="https://api.codetime.com.cn/images/vp.png" mode="scaleToFill"
					style="width:345px;height:150px;"></image>
				<view class="u-font-xl text-bold text-brown" style="letter-spacing: 15upx; line-height: 100upx;">
					开通会员后可享受专属服务</view>
				<u-grid :col="2" :border="false">
					<u-grid-item>
						<image src="../../static/circle.png" mode="scaleToFill" style="width:32px;height:32px;"></image>
						<view class="grid-text">无限次数查看</view>
					</u-grid-item>
					<u-grid-item>
						<image src="../../static/box.png" mode="scaleToFill" style="width:32px;height:32px;"></image>
						<view class="grid-text">3D街景地图</view>
					</u-grid-item>
					<u-grid-item>
						<image src="../../static/earth.png" mode="scaleToFill" style="width:32px;height:32px;"></image>
						<view class="grid-text">全球5万+景区</view>
					</u-grid-item>
					<u-grid-item>
						<image src="../../static/voice.png" mode="scaleToFill" style="width:32px;height:32px;"></image>
						<view class="grid-text">专业语音讲解</view>
					</u-grid-item>
				</u-grid>

				<u-button style="width: 70%;letter-spacing: 20upx;" class="text-bold" type="warning" @click.stop="govip"
					size="medium">立即开通</u-button>
			</view>

		</u-popup>
	</view>

</template>

<script>
	// service 层
	export default {
		data() {
			return {
				show: false,
				lng: '',
				lat: '',
				title: '',
				showTip: false,
				position: ''
			}
		},
		onLoad(e) {
			this.lng = e.lng
			this.lat = e.lat
			this.title = e.title
			uni.setNavigationBarTitle({
				title: this.title
			})

			//plus.navigator.closeSplashscreen()
		},
		onShow() {

		},
		mounted() {
			let that = this

			setTimeout(() => {
				that.show = true
			}, 6000)


			setTimeout(() => {
				that.position = {
					lng: that.lng,
					lat: that.lat
				}
			}, 1000)
		},
		methods: {
			govip() {
				this.$goWindow('/pages/vip/vip')
			},
			gotoback() {
				uni.navigateBack({
					delta: 1
				})
			},
			onViewClick(options) {
				console.log(options)
				this.message = options.test
				uni.showModal({
					title: "数据传递",
					content: options.test
				})
			},
			getMessage(options) {
				console.log("测试renderjs调用此方法：" + JSON.stringify(options))
			}
		}
	}
</script>

<style>
	.message {
		font-size: 22px;
		height: 120px;
		margin-top: 60upx;

	}

	.BMap_cpyCtrl {
		display: none;
	}

	.anchorBL {
		display: none;
	}
</style>

<script module="renderTest" lang="renderjs">
	import {
		mymap
	} from '../../utils/mqmap.js'
	export default {
		data() {
			return {
				map: null,
				panorama: null,
				panoramaService: null
			}
		},
		mounted() {
			let _this = this;
			// 引入百度地图
			this.$nextTick(() => {
				mymap('axwAoPrgDr46Kxq4ZHB8eLfzpXhg3dsI').then((mymap) => {
					_this.panorama = new BMap.Panorama('panorama');
					_this.panoramaService = new BMap.PanoramaService(); //1 
				})
			})
		},
		methods: {
			positionChanged(newValue, oldValue, ownerVm, vm) {

				let that = this
				that.panoramaService.getPanoramaByLocation(new BMap.Point(newValue.lng, newValue.lat), function(
					data) {
					if (data == null) {
						console.log('no data')
						that.showTip = true
						return;
					}
					that.panorama.setPosition(new BMap.Point(data.position.lng, data.position.lat));
					that.panorama.setPov({
						heading: -40,
						pitch: 6
					});
				});
			}

		}
	}
</script>
<style lang="scss" scoped>
	#panorama {
		width: 100%;
		height: 100vh;
		background-color: #00818A;
	}

	.BMap_cpyCtrl {
		display: none;
	}

	.anchorBL {
		display: none;
	}
</style>
